<template>
    <div class="log-item" @click="$emit('click')">
        <p class="order_no">津贴编号：{{item.order_no}}</p>
        <div class="log-content">
            <img src="../assets/images/default.png" class="avatar"/>
            <div class="message">
                <p class="name">{{item.name}}</p>
                <p class="time">{{item.created_at}}</p>
                <p class="send">{{item.pay_status|status}}</p>
            </div>
            <div class="money">
                <label class="label">
                    ￥{{item.money}}
                </label>

            </div>
        </div>
    </div>
</template>

<script>
    import {Url} from "../utils/config";

    export default {
        name: "gift-item",
        props: {
            item: {
                type: Object
            }
        },
        filters:{
            status(value){
                switch (value){
                    case 0:
                        return "未发放"
                    case 1:
                        return "已发放"
                    case 2:
                        return "未达到领取资格"
                }
            }
        },
        methods: {
            receiveGift() {
                let toast = this.$createToast({
                    txt: '正在领取',
                    time: 0
                });
                toast.show();
                this.$post(Url.giftReceive, {id: this.item.id}).then((res) => {
                    toast.hide();
                    this.$emit('reload');
                }).catch((error) => {
                    toast.hide();
                    this.$createDialog({
                        type: 'alert',
                        icon: 'cubeic-alert',
                        title: '错误',
                        content: error,
                    }).show();
                })
            }
        }
    }
</script>

<style scoped lang="less">
    .log-item {
        background: #fff;
        padding: 0 32px;
        margin-bottom: 20px;
        .order_no {
            font-size: 12PX;
            color: #888888;
            padding: 24px 10px;
            border-bottom: solid 1PX #e0e0e0;
        }
        .log-content {
            display: flex;
            flex-direction: row;
            height: 140px;
            align-items: center;
            .avatar {
                width: 120px;
                height: 120px;
            }
            .message {
                font-size: 12PX;
                color: #888888;
                margin-left: 32px;
                .name {
                    font-size: 14PX;
                    margin-bottom: 12px;
                }
                .time {
                    margin-bottom: 12px;

                }
                .send {
                    color: #4b8d00;
                    font-size: 14PX;
                }
            }
            .money {
                margin-left: auto;
                color: #e64e4d;
                font-size: 14PX;
                display: flex;
                flex-direction: column;
                .label {
                    margin-bottom: 10px;
                }
            }
        }

    }
</style>